@import "../../style/index.scss";

$split-icon-font-size: 20px;

.amp-button {
  height: var(--default-button-height);
  min-width: 0;
  border-radius: var(--default-button-radius) !important;
  border: $border-primary;
  box-sizing: border-box;
  font-size: var(--tag-font-size) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  position: relative;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  letter-spacing: 1px;
  font-family: var(--primary-font-family);
  padding-left: var(--default-spacing) !important;
  padding-right: var(--default-spacing) !important;
  padding-top: 0;
  padding-bottom: 0;
  transition-property: border-color, background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;

  &--icon-left {
    padding-left: var(--default-spacing-small) !important;
  }

  &--icon-right {
    padding-right: var(--default-spacing-small) !important;
  }

  &[disabled] {
    cursor: default;
    font-family: var(--primary-font-family);
  }

  &__icon {
    margin: 0 var(--icon-spacing);
  }

  &.amp-button--primary {
    background-color: var(--primary);
    color: var(--static-white);
    border: $border-primary;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--secondary);
      border-color: var(--secondary);
      outline: none;
    }

    &[disabled] {
      background-color: var(--gray-80);
      color: var(--gray-40);
      border-color: var(--gray-80);
    }

    &--danger {
      background-color: var(--theme-red);
      border: 1px solid var(--theme-red);

      &:hover,
      &:active,
      &:focus {
        background-color: var(--theme-red);
        border-color: var(--theme-red);
        outline: none;
      }
    }
  }

  &.amp-button--text {
    background-color: transparent;
    color: var(--gray-base);
    border: none;
    height: auto;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &:hover,
    &:active,
    &:focus {
      color: var(--gray-20);
      background-color: transparent;
      border: none;
      outline: none;
    }

    &[disabled] {
      color: var(--gray-40);
      background-color: transparent;
      border: none;
    }

    &--danger {
      color: var(--theme-red);

      &:hover,
      &:active,
      &:focus {
        color: var(--theme-red);
        outline: none;
      }
    }
  }

  &.amp-button--split {
    display: inline-flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;

    &[disabled] .amp-button__split:after {
      border-left-color: var(--gray-70);
    }

    .amp-button__split {
      padding-left: var(--default-spacing) !important;
      margin-left: var(--default-spacing);
      position: relative;

      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: -6px;
        bottom: -6px;
        border: none;
        border-left: $border-primary;
      }

      .split-icon {
        font-size: $split-icon-font-size;
      }
    }
  }

  &.amp-button--outline {
    background-color: transparent;
    color: var(--gray-base);
    border-color: var(--gray-base);

    &:hover,
    &:active,
    &:focus {
      color: var(--gray-10);
      border-color: var(--gray-10);
      outline: none;
    }

    &[disabled] {
      color: var(--gray-40);
      border-color: var(--gray-40);
    }

    &--danger {
      color: var(--theme-red);
      border-color: var(--theme-red);

      &:hover,
      &:active,
      &:focus {
        color: var(--theme-red);
        border-color: var(--theme-red);
        outline: none;
      }
    }
  }
}
